<template>
    <div class="addpoint-footer" v-show="Total">
        <label>
            <input type="checkbox" :checked="isAll" @change="checkAll" >
        </label>
        <span>
            <span>已选中点{{ chooseTotal }}</span> /所有点{{ Total }}
        </span>
        <button class="btn btn-danger" @click="clearAll">删除所有选中点</button>
    </div>
</template>
<script>
    import bus from '@/utils/bus';
    import { computed } from 'vue';

    export default{
        name:'AddPointFooter',
        props: ['points'],
        setup(props) {
            const chooseTotal = computed(() => {
                return props.points.reduce((pre, current) => pre + (current.choose ? 1 : 0), 0)
            })

            const Total = computed(() => {
                return props.points.length
            })

            const isAll = computed(() => {
                return chooseTotal.value === Total.value && Total.value > 0
            })

            function checkAll(e) {
                bus.emit('checkallpoint', e.target.checked)
            }

            function clearAll() {
                if(confirm('确认要删除所选中的点吗?')){
                    let chose = false
                    if(props.points.some(point => point.choose === true)) {
                        chose = true
                    }
                    if(!chose) {
                        alert('没有选中任何点，请选择你要删除的点')
                        return
                    }
                    else {
                        bus.emit('clearchoosepoint')
                    }
                }
            }

            return {
                chooseTotal,
                Total,
                isAll,
                checkAll,
                clearAll
            }
        }
    }
</script>
<style scoped>
.addpoint-footer{
    height: 22%;
    line-height: 22%;
    padding-left: .375rem;
    margin-top: .3125rem;
    overflow-block: auto;
}
.addpoint-footer label{
    display: inline-block;
    margin-right: 1.25rem;
    cursor: pointer;
}
.addpoint-footer label input{
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: .3125rem;
}
.addpoint-footer button{
    float: right;
}
</style>